
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!--[if lte IE 8]><script type="text/javascript">window.location.replace( "flash/index.php" );</script><![endif]-->
		<title>ColorBrewer: Color Advice for Maps</title>
		<link href='' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<link rel="stylesheet" type="text/css" href="lib/spectrum.css" />
		<script type="text/javascript" src="colorbrewer_schemes.js"></script>
		<script src="jquery.min.js" type="text/javascript"></script>
		<script src="lib/jquery.svg.min.js" type="text/javascript"></script>
		<script src="lib/jquery.svgdom.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="lib/spectrum.min.js"></script>
		<script type="text/javascript" src="cmyk.js"></script>
		<script type="text/javascript">

		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-8516419-1']);
		  _gaq.push(['_trackPageview']);

		  (function() {
		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();

		</script>
	</head>
	<body>
		<div id="wrapper">
			<div id="left">
				<div id="number" class="section">
					<div class="learn-more" id="number-learn-more" title="Learn more"></div>
					<p>Number of data classes:</p>
					<select id="num-classes">
						<option name="3">3</option>
						<option name="4">4</option>
						<option name="5">5</option>
						<option name="6">6</option>
						<option name="7">7</option>
						<option name="8">8</option>
						<option name="9">9</option>
						<option name="10">10</option>
						<option name="11">11</option>
						<option name="12">12</option>
						<option name="16">16</option>
						<option name="34">34</option>
						<option name="34">51</option>
					</select>
				</div> <!--end number div-->
				
				<div id="type" class="section">
					<div class="learn-more" id="schemes-learn-more" title="Learn more"></div>
					<p>Nature of your data:</p>
					<input type="radio" class="scheme-type" name="scheme-type" id="sequential" checked/><label class="check-label" for="sequential">sequential</label>
					<input type="radio" class="scheme-type" name="scheme-type" id="diverging"/><label class="check-label" for="diverging">diverging</label>
					<input type="radio" class="scheme-type" name="scheme-type" id="qualitative"/><label class="check-label" for="qualitative">qualitative</label><br>
					<input type="radio" class="scheme-type" name="scheme-type" id="tidyquant"/><label class="check-label" for="tidyquant">tidyquant</label>
					<input type="radio" class="scheme-type" name="scheme-type" id="awtools"/><label class="check-label" for="awtools">awtools</label>
					<input type="radio" class="scheme-type" name="scheme-type" id="ggsci"/><label class="check-label" for="ggsci">ggsci</label>
				</div>
				
				<div id="scheme" class="section">
					<p>Pick a color scheme:</p>
					<div id="scheme1">
						<label id="multi"></label>
						<div id="ramps"></div>
					</div> <!--end scheme1 div-->
					<div id="scheme2">
						<label id="single"></label>
						<div id="singlehue"></div>
					</div> <!--end scheme2 div-->
				</div> <!--end scheme div-->
				
				<div id="colors">
					<div id="options">
						<div class="learn-more" id="filters-learn-more" title="Learn more"></div>
						<p id="scheme-name">BuGn</p>
						<!-- <div style="height:27px">
							<div class="score-icon ok" id="blind-icon"></div>
							<div class="score-icon ok" id="copy-icon"></div>
							<div class="score-icon ok" id="screen-icon"></div>
							<div class="score-icon ok" id="print-icon"></div>
						</div> -->
						<select id="color-system">
							<option>RGB</option>
							<option>HEX</option>
							<!-- <option>CMYK</option> -->
						</select>
						<!-- <p>Only show:</p>
						<div id="filters">
							<input type="checkbox" id="blindcheck" /><label for="blindcheck">colorblind safe</label><br/>
							<input type="checkbox" id="printcheck" /><label for="printcheck">print friendly</label><br/>
							<input type="checkbox" id="copycheck" /><label for="copycheck">photocopy safe</label>
						</div>  -->
						<!--end filters div-->
						
						<!-- <div class="learn-more" id="context-learn-more"></div>
						<p>Context:</p>
						<div id="layers">
							<input type="checkbox" id="roadscheck" /><label for="roadscheck">roads</label><input class="color" type="text" id="road-color"/><br/>
							<input type="checkbox" id="citiescheck" /><label for="citiescheck">cities</label><input class="color" type="text" id="city-color"/><br/>
							<input type="checkbox" id="borderscheck" checked /><label for="borderscheck">borders</label><input class="color" type="text" id="border-color"/><br/>
						</div>  -->
						<!--end layers div-->
						
						<p>Background:</p>
						<div id="background">
							<input type="radio" name="background-radio" id="solid-color" checked/><label class="check-label" for="solid-color">solid color</label><input class="color" type="text" id="bg-color"/><br/>
							<input type="radio" name="background-radio" id="terrain"/><label class="check-label" for="terrain">terrain</label>
							<div id="transparency-container">
								<div id="transparency-track"></div>
								<div id="transparency-slider"></div>
								<p>color transparency</p>
							</div>
						</div> <!--end background div-->
					</div> <!--end options div-->
					
					<div id="system">
						<div id="color-chips"></div>
						<div id="color-values"></div>
					</div> <!--end system div-->
				</div> <!--end colors div-->
			</div> <!--end left div-->
			
			<div id="header">
				<p id="nav"><a id="how" href="#">how to use</a> | <a href="http://www.personal.psu.edu/cab38/ColorBrewer/ColorBrewer_updates.html" target="blank">updates</a> | <a id="downloads" href="#">downloads</a> | <a id="credits" href="#">credits</a></p>
				<h1>COLOR<span>BREWER</span> 2.0</h1>
				<h3>color advice for cartography</h3>
			</div> <!--end header-->
			<div id="map-container">
				<div id="counties" class="svg-container"></div>
				<div id="overlays" class="svg-container"></div>
			</div> <!--end map-container-->
			
			<div id="export">
				<div id="tab">
					<div>RStata</div>
				</div> <!--end tab div-->
				<div id="selected-data">
					<h2>Export your selected color scheme:</h2>
					<div id="perma">
						<h3>Permalink</h3>
						<p>Share a direct link to this color scheme.</p>
						<input type="text" id="permalink" value="http://colorbrewer2.org/js/blahblah/" />
					</div> 
					<!--end perma div-->
					<!-- <div id="adobe">
						<h3>Adobe</h3>
						<p>Download an <a id="ase" href="#" target="_blank">Adobe Swatch Exchange (ASE) file</a> of this scheme.</p>
					</div>  -->
					<!--end adobe div-->
					<!-- <div id="gimp">
						<h3>GIMP and Inkscape</h3>
						<p><a id="gpl" href="#" target="_blank">GIMP color palette</a> for this scheme.</p>
					</div>  -->
					<!--end adobe div-->
					<div class="copy" id="copy-json">
						<h3>Stata/R</h3>
						<p>Hex for R, RGB for Stata</p>
						<input type="text" id="permalink" value="JSON!" />
					</div>
					<!-- <div class="copy" id="copy-css">
						<h3>CSS</h3>
						<p>CSS classes for this scheme</p>
						<input type="text" id="permalink" value="CSS!" />
					</div> -->
				</div> <!--end selected-data div-->
				
				
			</div> <!--end export div-->
			
			<div id="probe"></div>
		
		</div> <!--end wrapper div-->
		
		<div id="footer">
			<a href="http://axismaps.com" target="_blank"><img src="images/axismaps.png" class="logo" alt="Axis Maps" title="Axis Maps"/></a>
			<p>&copy; Cynthia Brewer, Mark Harrower and The Pennsylvania State University & 由微信公众号 RStata 修改和部署</p>
			<p><a href="https://github.com/axismaps/colorbrewer/" target="_blank"><img src='images/GitHub-Mark-32px.png' class='gh'/>Source code and feedback</a></p>
		</div> <!--end footer-->
		<div id="mask"></div>
		<div id="learnmore" style="display:none">
			<p id="close">X</p>
			<p id="learnmore-title">MUGGIN'</p>
			<div id="content"></div>
		</div>
		<script src="colorbrewer.js"></script>
	</body>
</html>